

;(function(X, $){

var FALSE = false,
    TRUE = true,
    UNDEFINED = undefined,
    Win = this,
    getCfg = X.getCfg,
    req = X.request,
    util = X.util,
    tmpl = X.tmpl,
    popupForm = X.popupForm,
    model = X.model,
    view = X.view,
    cache = X.cache,
    collection = X.collection,
    extend = $.proxy(Backbone.View.extend, Backbone.View);


$.extend(view, {

    //base class of popup, others should be extended from it 
    popupBase : extend({

        initialize : function(options){
            var loadingClass = options.loadingClass || 'loading',
                onShow = options.onShow || this.onShow,
                afterClose = options.afterClose,
                url = options.url,
                data = options.data,
                _this = this,
                el = $.tmpl(tmpl[this.tmpl], {
                    className : options.className,
                    title : options.title,
                    id : options.id
                });

            this.setElement(el);
            delete options.onShow;
            url && this.$('.' + loadingClass).removeClass('hidden');
            this.simplemodal = el.modal($.extend(options, {

                onOpen : function(modal){
                    modal.overlay.fadeIn('fast', function(){
                        modal.container.show();
                        modal.data.fadeIn('fast');
                        //handle the content of modal.data
                        //ajax
                        if(url){
                            
                            $.ajax({
                                url: url,
                                dataType: 'json',
                                data: data,
                                success: function(res, state, req){
                                    _this.render.call(_this, modal, options, onShow, res);                                   
                                },
                                type : options.type || 'get'
                            });

                        //static                          
                        }else{
                            _this.render.call(_this, modal, options, onShow);     
                        }
                    });
                },

                onClose : function(){
                    _this.close();
                },

                closeClass : 'simplemodal-close'

            }));
        },

        render : function(modal, options, onShow, res){
            var parse = options.parse,
                contentHTML = options.contentHTML,
                url = options.url,
                loadingClass = options.loadingClass || 'loading',
                loading = this.$el.find('.' + loadingClass),
                tmplData = options.tmplData,
                res = url ? parse ? parse(res) : res : null;

            if(contentHTML){
                contentHTML = $.tmpl(tmpl[contentHTML], $.extend(tmplData, res));
                loading.replaceWith(contentHTML);
                onShow.call(this, modal, this.$el, res);
            }else{
                onShow.call(this, modal, loading.parent().html(''), res);
            }
            url && $.modal.update(modal.data.outerHeight());
        },

        close : function(cb){
            var modal = $.modal.impl.d,
                _this = this,
                afterClose = this.options.afterClose;

            modal.container.fadeOut('fast', function(){
                _this.remove();
                modal.overlay.fadeOut('fast', function(){
                    $.modal.impl.o.onClose = null;
                    $.modal.close();
                    afterClose && afterClose();
                    cb && cb();
                })
            });
            
        }
    }),

    //n-auto create popup1 View
    getPopup1 : function(){
        var p = this.popup1;

        if(!p){
            p = this.popup1 = this['popupBase'].extend({
                tmpl : 'popup1'
            })
        }

        return p;
    },

    popupTips : function(tips){
        return new (this.getPopup1())({
            onShow : function(modal, el){
                el.append(tips)
            },
            id : 'popupTips',
            title : 'tips',
            className : 'popup-tips'
        })
    },

    popupEdit : extend({

        events : {
            'click .claim' : 'claim',
            'click .unclaim' : 'unclaim'//,
            
            //'click .form-horizontal' : 'submit'
        },
        initialize : function(options){
            var _this = this;

            this.model.set('userName', this.model.get('Registrant1FirstName')+' '+this.model.get('Registrant1LastName'))
            this.form = view['coupleEditForm'](this.model);

            this.simplemodal = new (view['getPopup1']())({
                onShow : function(modal, el){

                    $('#popupEditForm').replaceWith($(_this.form.el));

                    $.modal.update(modal.data.outerHeight());
                },
                contentHTML : 'popupEdit',
                tmplData : this.model.toJSON(),
                title : 'edit',
                className : 'popup-edit'
            })
            this.setElement(this.form.el);
        },
        claim : function() {
            this.simplemodal.close(function() {
                new view['popupClaimSearchList'];
            })
        },
        unclaim : function() {
            this.simplemodal.close(function() {
                new view['popupUnClaim'];
            })
        },
        submit : function() {
            //var obj = this.form.getValue();
        }
    }),

/*
    testCoupleList : extend({
        events : {
            'click .J_load' : 'getData'
        },

        initialize : function(options){
            var _this = this;

            this.listItems = [];
            this.collection = new collection['testCoupleList'];
            this.collection.on('reset', function(collection, res){
                    _this.$('.J_tip').addClass('hidden');
                    _this.render();
            })
            
        },

        render : function(){
            this.collection.each(this.addOne, this);
            return this;
        },

        addOne : function(model){
            this.listItems.push(new view['testCoupleListItem']({model : model.set('id', model.get('Id'))}));
            this.listItems[this.listItems.length - 1].render().$el.appendTo(this.$('.J_tb'));
        },

        getData : function(e){
            e.preventDefault();

            this.collection.fetch({
                data : {
                    retailer : 're'
                }
            })
        }
    }),

    testCoupleListItem : extend({

        events : {
            'click .J_edit' : 'edit',
            'click .J_remove' : 'remv'
        },

        initialize : function(options){
            this.model.on('remove', function(){
                console.log('model remove', arguments)
            })
        },

        render : function(){
            html = $.tmpl(tmpl['testCoupleListItem'], this.model.toJSON());
            this.setElement(html);
            return this;
        },

        edit : function(e){
            e.preventDefault();

            new view['popupEdit']({
                model : this.model
            })
        },

        remv : function(e){
            var _this = this;

            e.preventDefault();

            this.model.destroy({
                success : function(){
                    //_this.remove();
                    console.log(arguments)
                }
            })
        }

    })
*/

    testCoupleList : extend({
        events : {
            'click .J_load' : 'getData'
        },

        initialize : function(options){
            var _this = this;

            this.collection = new collection['testCoupleList'];
            
            this.collection.items = [];
            this.collection.on('reset', function(collection, req){
                _this.render();
                
            })
            .on('add', function(){
                console.log('add')
            })
        },

        render : function(){
            var el;

            this.collection.each(function(model, index, models){
                el = new view['testCoupleListItem']({model : model});
                this.$('.J_tip').hide();
                this.collection.items.push(el);  
                el.render().$el.appendTo(this.$('.J_tb'));
            }, this)

        },

        getData : function(e){
            e.preventDefault();

            this.collection.fetch({
                data : {
                    registry : 're',
                    id : '',
                    price : ''
                },

                success : function(){

                },

                error : function(){

                }
            })
        }
    }),

    testCoupleListItem : extend({
        events : {
            'click .J_edit' : 'edit',
            'click .J_remove' : 'remv'
        },

        initialize : function(options){

        },

        render : function(){
            var html = $.tmpl(tmpl['testCoupleListItem'], this.model.toJSON());
            this.setElement(html);
            return this;
        },

        edit : function(e){
            e.preventDefault();
            new view['testPopupEdit']({model:this.model})
        },

        remv : function(e){
            e.preventDefault();
            this.remove()
        }
    }),

    testPopupEdit:extend({
        initialize:function(options){

        },
        render:function(){

        }
    })
    
})

})(XO, $);
